ITHACK
【JavaScript】ブラウザイベント入門 - ブラウザのイベントに応じて処理（イベントハンドラー）を実行する

【JavaScript】ブラウザイベント入門 - ブラウザのイベントに応じて処理（イベントハンドラー）を実行する

JavaScriptのブラウザイベントについて解説します。

検証環境

ブラウザイベント

ブラウザイベントは“ブラウザ動作のWEBページで発生するイベント”です。

JavaScriptはクリックやキーボード入力など様々なイベントを検知できます。

イベントハンドラー

イベントハンドラーは“イベント発生時の処理”です。

※ イベントハンドラーはイベントリスナーと呼ぶことがあります。

JavaScriptはイベントハンドラーをHTML属性値やDOMを利用したコールバック関数として設定して実行できます。

このドキュメントではクリックイベントを例に各設定方法を確認します。

HTML属性値

HTML属性を利用してイベントハンドラーを設定します。

基本構文

<タグ名 イベント属性="処理">

イベント属性はイベントに対応する属性です。

例えばクリックイベントはonclickになります。

処理はJavaScriptのコードです。

サンプル

___ih_hl_start
<button onclick="console.log('Hello World!');">ボタン</button>
___ih_hl_end
Hello World!

ボタンをクリックするとonclick属性の処理を実行し、コンソールにHello World!を出力します。

※ プレビューには影響しませんので、ご自身の動作環境でお試しください。

また、script要素や外部JSファイルの関数等の処理を呼び出すことが可能です。

___ih_hl_start
<button onclick="result();">ボタン</button>
___ih_hl_end
<p id="result"></p>

<script>
    function result() {
        let result = document.getElementById('result');
        result.textContent = 'Hello World!';
    }
</script>

このボタンをクリックするとp要素のテキストをHello World!に設定します。

HTML属性値のコードは管理や可読性、汎用性等の観点から簡潔であることが望まれます。

そのため、一般的にはコード量が複数行ある場合は、script要素や外部JSファイルに関数として定義し、HTML属性値では関数の呼び出しのみを行います。

ただし、そのようなケースに合わない場合もあるので都度判断してコーディングすることが大切です。

DOM

DOMのイベントハンドラー設定はプロパティまたはメソッドのいずれかを利用します。

プロパティ

DOMのイベントプロパティはイベントハンドラーの登録や解除を行えます。

登録

イベントプロパティにイベントハンドラーを登録（代入）します。

基本構文
要素ノード.イベント種別 = 処理
サンプル
<button id="btn">ボタン</button>
<p id="result"></p>
    
<script type="text/javascript">
    function result() {
        let result = document.getElementById('result');
        result.textContent = 'Hello World!';
    }
    
    let btn = document.getElementById('btn');
    
    ___ih_hl_start
    btn.onclick = result;
    ___ih_hl_end
</script>

１２行目がイベントハンドラーの登録です。

onclickプロパティはクリック時のイベントハンドラーになります。

解除

イベントハンドラーの解除はイベントプロパティの値をnullに設定します。

基本構文
変数.イベント種別 = null
サンプル
<button id="btn">ボタン</button>
<p id="result"></p>
    
<script type="text/javascript">
    function result() {
        let result = document.getElementById('result');
        result.textContent = 'Hello World!';
    }
    
    let btn = document.getElementById('btn');
    
    btn.onclick = result;
    
    ___ih_diff_start
+    btn.onclick = null;
    ___ih_diff_end
</script>

１つ前のサンプルコードにイベントハンドラー解除の処理を追加しました。

１２行目でイベントハンドラーを登録していますが、１４行目で解除しているため、ボタンをクリックしてもresult関数は呼び出されません。

メソッド

DOMにはイベントハンドラーの登録や解除、複数登録を行えます。

登録

addEventListenerメソッドでイベントハンドラーを登録します。

基本構文
要素ノード.addEventListener(イベント種別, 処理)
サンプル
<button id="btn">ボタン</button>
<p id="result"></p>
    
<script type="text/javascript">
    function result() {
        let result = document.getElementById('result');
        result.textContent = 'Hello World!';
    }
    
    let btn = document.getElementById('btn');
    
    ___ih_hl_start
    btn.addEventListener('click', result);
    ___ih_hl_end
</script>

１２行目がaddEventListenerメソッドを利用したイベントハンドラーの登録です。

イベント種別の'click'はクリック時のイベントハンドラーになります。

複数登録

addEventListenerメソッドで登録したコールバック関数はイベントハンドラーに追加されます。

コールバック関数を置き換えではなく、追加なので、複数登録が可能です。

<button id="btn">ボタン</button>
<p id="result1"></p>
<p id="result2"></p>
    
<script type="text/javascript">
    function result1() {
        let result = document.getElementById('result1');
        result.textContent = 'Hello World!';
    }
    
    function result2() {
        let result = document.getElementById('result2');
        result.textContent = 'Good Morning!';
    }
    
    let btn = document.getElementById('btn');
    
    ___ih_hl_start
    btn.addEventListener('click', result1);
    ___ih_hl_end
    
    ___ih_hl_start
    btn.addEventListener('click', result2);
    ___ih_hl_end
</script>

１８行目と２０行目でbutton要素に２つのイベントハンドラーを登録しています。

プレビューのボタンをクリックした時の動作から、各イベントハンドラーを実行したことが確認できます。

解除

removeEventListenerメソッドでイベントハンドラーを解除します。

基本構文
要素ノード.removeEventListener(イベント種別, 処理)
サンプル
<button id="btn">ボタン</button>
<p id="result1"></p>
<p id="result2"></p>
    
<script type="text/javascript">
    function result1() {
        let result = document.getElementById('result1');
        result.textContent = 'Hello World!';
    }
    
    function result2() {
        let result = document.getElementById('result2');
        result.textContent = 'Good Morning!';
    }
    
    let btn = document.getElementById('btn');
    
    btn.addEventListener('click', result1);
    
    btn.addEventListener('click', result2);
    
    ___ih_hl_start
    btn.removeEventListener('click', result1);
    ___ih_hl_end
</script>

２２行目がremoveEventListenerメソッドを利用したイベントハンドラーの解除です。

１８行目で登録したresult1関数を解除しています。

プレビューのボタンをクリックした時の動作から、正常に解除されたことが分かります。

イベントの種類

イベントにはクリック以外にも様々な種類があります。

HTML属性とaddEventListenerメソッドでイベント種別の名称が異なりますが、HTML属性は名称の先頭にonが付き、addEventListenerメソッドは付かないという違いのため、簡単に覚えられます。

代表的なイベント
HTML属性 addEventListener 意味
onclick click クリックした時
oncontextmenu contextmenu 右クリックした時
ondblclick dblclick ダブルクリックした時
onkeydown keydown キー（キーボードなど）が押された時
onkeyup keyup キー（キーボードなど）が押されている状態から離された時
onkeypress keypress キー（キーボードなど）が押されている状態
onfocus focus フォーカスが当たった時
onblur blur フォーカスが外れた時
onchange change 値の変更が確定した時
oninput input 値を変更した時
onsubmit submit 送信された時
onmousedown mousedown 押した時
onmouseup mouseup 押している状態から離した時
onmousemove mousemove 要素上をマウスが移動した時
onmouseover mouseover 要素上にマウスが被さった時
onmouseout mouseout 要素上からマウスが外れた時
onwheel wheel マウスホイールが回転した時
onselect select テキストが選択された時
onreset reset リセットした時
onload load データ（ページや画像、外部ファイルなど）が読み込まれた時
onerror error エラーが発生した時
【CSS】word-break - 単語中の改行
【コマンドライン】ユーザーのグループ確認 [ groups ]
【コマンドライン】ユーザー・グループの確認 [ getent ]
【JavaScript】イベントの伝搬 - キャプチャリング・バブリング
【JavaScript / DOM】属性ノードの取得・設定・削除 - 属性ノードを要素ノードで扱う方法
【JavaScript / DOM】ノード / textContentプロパティ - ノードのテキストを変更する
AtMarkRule
Browser
CentOS
Command
Command
CSS
Database
Development
DOM
Event
HTML
JavaScript
MarkupLanguage
MySQL
Network
OS
PHP
Programming
Property
Pseudo Class
Pseudo Element
Relational Database
Server
Standard Object
Tag